<template>
  <div>
    <!-- 搜索 -->
    <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline">
      <el-form-item label="活动">
        <el-select v-model="formItem.activity_id" clearable placeholder="请选择">
          <el-option v-for="(item,index) in activityData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="formItem.time_type" clearable placeholder="请选择">
          <el-option label="日" value="days"></el-option>
          <el-option label="月" value="month"></el-option>
          <el-option label="季度" value="quarter"></el-option>
          <el-option label="年" value="year"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="formItem.start_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="formItem.end_time" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
      </el-form-item>
    </el-form>
    <div  id="myChart" :style="{width: '100%', height: '400px'}"></div>
  </div>
</template>
<script>
import axios from "@/axios";
import moment from 'moment'
import { isIntNum } from "@/assets/js/common";

export default {
  data() {
    return {
      formItem: {
        activity_id: "",
        time_type: "",
        start_time: "",
        end_time: ""
      },
      info_data: [],
      activityData: [], // 活动列表
    };
  },
  mounted() {
    // 活动列表
    this.getActivity();
    // 列表
    this.statistics();
  },
  methods: {
    //获取勾选参数
    select(val) {
      let vm = this;
      vm.ids = [];
      for (let i in val) {
        vm.ids.push(val[i].id);
      }
    },
    // 活动列表
    getActivity() {
      let vm = this;
      axios
        .post("/admin/count/regularActivity", {
          //type:2
        })
        .then(response => {
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            this.activityData = result;
            vm.formItem.activity_id = result[0].id;
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$message.info("网络或服务器异常");
        });
    },
    //搜索
    searchSubmit() {
      this.statistics();
    },
    // 订单统计
    statistics() {
      let vm = this;
      vm.formItem.start_time = vm.formItem.start_time ? moment(vm.formItem.start_time).format('YYYY-MM-DD') : "";
      vm.formItem.end_time = vm.formItem.end_time ? moment(vm.formItem.end_time).format('YYYY-MM-DD') : "";
      console.log(vm.formItem);
      axios
        .post("/admin/count/randomStatistic", vm.formItem)
        .then(response => {
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            this.chartInit(result);
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$message.info("网络或服务器异常");
        });
    },
    // 图表
    chartInit(data){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      // 数据
      let record = data.record;
      this.info_data = [];
      for (var i = 0; i < record.length; i++) {
        this.info_data.push({
          name: record[i].name,
          type: 'line',
          stack: '总量',
          data: record[i].data
        });
      }
      // 清空当前实例，会移除实例中所有的组件和图表。
      myChart.clear();
      // 绘制图表
      myChart.setOption({
        title: {
          text: '',
          textStyle: {
            color: "rgb(85, 85, 85)",
            fontSize: 18,
            fontStyle: "normal",
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: data.names,
          selectedMode: false,
          type:'scroll',
          // orient: 'vertical',
          // right: 10,
          top: 30,
          // bottom: 20,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          left: 30,
          show: true,
          feature: {
            dataView: {
              show: false,
              readOnly: true
            },
            magicType: {
              show: true,
              type: ["line", "bar", "tiled"]
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            },
            mark: {
              show: false
            }
          }
        },
        calculable: false,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.times
        },
        yAxis: {
          type: 'value'
        },
        series: this.info_data
      });
    },
    //返回上一页
    handretrun() {
      this.$router.go(-1);
    }
  }
};
</script>